
<template>
  <!-- 照片墙 -->
  <div class="box-album-board">
    <div class="box-head">
      <span>{{param.label}}</span>
      <span>{{param.count}}</span>
    </div>
    <div class="box-content">
      <div class="photoItem" v-for="(row,index) in param.photoList" :key="index">
        <div class="photoItem-inner">
          <div class="box-img">
            <el-image
              class="pre-img"
              lazy
              :scroll-container="'.home_content'"
              fit="fill"
              :src="row.src"
              @click.stop="showPreview(index,row)"
            ></el-image>
          </div>
          <div class="box-txt">
            <el-row class="stu">学员：{{row.studentName}}</el-row>
            <el-row>拍摄：{{row.teacherName}}</el-row>
            <el-row>
              {{row.createTime}}
              <i class="deletebtn el-icon-delete"></i>
            </el-row>
          </div>
        </div>
      </div>
    </div>

    <el-dialog class="popup" :visible.sync="imagePreview" width="60%">
      <el-carousel
        ref="imagePreview"
        indicator-position="none"
        :autoplay="false"
        :height="'6.5rem'"
        :interval="500"
      >
        <el-carousel-item v-for="(row,index) in param.photoList" :key="index">
          <div class="box-bigImg">
            <div class="box-img">
              <img :src="row.src" />
            </div>
            <div class="box-txt">
              <el-row class="stu">{{row.studentName}}</el-row>
              <el-row>
                <el-col :span="5">上传日期：{{row.createTime}}</el-col>
                <el-col :span="5">拍摄：{{row.teacherName}}</el-col>
              </el-row>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["param"],
  components: {},
  data() {
    return {
      imagePreview: false,
      currIndex: 0,
      currItme: null
    };
  },
  methods: {
    showPreview(index, item) {
      this.imagePreview = true;

      if (this.$refs["imagePreview"]) {
        this.$refs["imagePreview"].setActiveItem(index);
      } else {
        this.$nextTick(() => {
          this.$refs["imagePreview"].setActiveItem(index);
        });
      }
    }
  },
  mounted() {},
  computed: {},
  watch: {}
};
</script>

<style lang="scss" scoped>
.box-album-board {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 0.16rem;
  .box-head,
  .box-content {
    width: 100%;
  }
  .box-head {
    padding: 0.08rem;
  }
  .box-content {
    display: flex;
    flex-wrap: wrap;

    .photoItem {
      width: 20%;
      height: 3rem;
      padding: 0.08rem;
      .photoItem-inner {
        width: 100%;
        height: 100%;
        border: 1px solid #666666;
        .pre-img {
          width: 100%;
          height: 100%;
        }
      }
      .box-img {
        width: 100%;
        height: 1.8rem;
        img {
          cursor: pointer;
          width: 100%;
          height: 100%;
        }
      }
      .box-txt {
        width: 100%;
        height: 0.8rem;
        padding: 0 0.16rem;
        .stu {
          margin-top: 0.2rem;
        }
        .deletebtn {
          cursor: pointer;
          float: right;
        }
      }
    }
  }

  .popup {
    .box-bigImg {
      width: 100%;
      height: 100%;
      .box-img {
        width: 90%;
        height: 90%;
        display: flex;
        justify-content: center;
        margin: 0 auto;
        align-items: center;
        img {
          height: 100%;
          width: 100%;
          object-fit: contain;
		  background-color: #f6f2f2;
        }
      }
      .box-txt {
        width: 100%;
        height: 10%;
        font-size: 0.18rem;
		padding: 0 5%;
		.el-row{
			margin-top: 0.1rem;
		}
      }
    }
  }
}
</style>